<template>
    <div class="menu-box">

<!--      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">-->
<!--        <el-radio-button :label="false">展开</el-radio-button>-->
<!--        <el-radio-button :label="true">收起</el-radio-button>-->
<!--      </el-radio-group>-->
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
        :router="true"
        @select="handleSelect"
      >


        <el-menu-item :route="item.route" :key="index" :index="String(index+1)" v-for="(item,index) in menuList">
          <i :class="item.icon" :style="item.style"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </el-menu>
    </div>
</template>

<script>

    import {removeToken} from "../../util/token";

    export default {
      name: "Menu",
      data() {
        return {
          isCollapse: true,
          menuList:[
            {
              name:"任务",
              route:"/index/job",
              // icon:"el-icon-menu"
              icon:"el-icon-date"
            },
            {
              name:"备忘录",
              route:"/index/note",
              icon:"el-icon-menu"
            },
            {
              name:"退出",
              route:"/login",
              icon:"el-icon-switch-button",
              style:{
                color:"red"
              }
            }
          ]
        };
      },
      methods: {
        handleSelect(index,indexPath){
          // 此处index为String类型, - _ - ??????
          let i= Number(index)

          if(i === this.menuList.length){
            this.$message({
              message: '退出成功',
              type: 'success'
            });
            removeToken()
          }
        },
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      }
    }
</script>

<style scoped lang="less">
  .menu-box{
    /*width: 100%;*/
    /*height: 100%;*/
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>
